<template>
  <div id="container">
    <div>
      <swiper :indicator-dots="indicatorDots"
              :autoplay="autoplay"
              :interval="interval"
              :duration="duration"
              style="height: 700px"
      >
        <block :wx:for="imgUrls" :key="item">
          <swiper-item>
            <image :src="item" class="slide-image" width="100%" v-bind:style="{ height: height+ 'px' }"/>
          </swiper-item>
        </block>
      </swiper>

      <!--<button bindtap="changeIndicatorDots">indicator-dots</button>-->
      <!--<button bindtap="changeAutoplay">autoplay</button>-->
      <!--<slider bindchange="intervalChange" show-value min="500" max="2000"/>-->
      <!--interval-->
      <!--<slider bindchange="durationChange" show-value min="1000" max="10000"/>-->
      <!--duration-->

    </div>

    <i-tab-bar :current="current" fixed="true" color="#f759ab" @change="handleChange">
      <i-tab-bar-item key="integral" icon="integral" current-icon="integral" size="28"></i-tab-bar-item>
      <i-tab-bar-item key="emoji" icon="emoji" current-icon="emoji" size="50"></i-tab-bar-item>
      <i-tab-bar-item key="addressbook" icon="addressbook" current-icon="addressbook" size="28"></i-tab-bar-item>
    </i-tab-bar>


  </div>
</template>

<script>
  export default {
    data: {
      imgUrls: [
        'http://hbimg-other.b0.upaiyun.com/35fcd032002af3f5c7e548fda98ea2916eeed40215d48_/fw/480',
        'http://pagead2.googlesyndication.com/simgad/6581350539454138853'
      ],
      height: '700',
      indicatorDots: false,
      autoplay: false,
      interval: 5000,
      duration: 1000,
      screenWidth: 0
    },
    onLoad: function () {
    },
    mounted () {
      const that = this
      window.onresize = () => {
        console.log(document.body.clientWidth)
        return (() => {
          window.screenWidth = document.body.clientWidth
          that.screenWidth = window.screenWidth
        })()
      }
    },
    watch: {
      // 如果 `clientHeight` 发生改变，这个函数就会运行
      clientHeight: function () {
        this.changeFixed(this.clientHeight)
      }
    },
    methods: {
      changeFixed (clientHeight) {
        // 动态修改样式
        console.log(clientHeight)
        this.$refs.homePage.style.height = clientHeight + 'px'
      },
      changeIndicatorDots (e) {
        this.setData({
          indicatorDots: !this.data.indicatorDots
        })
      },
      changeAutoplay (e) {
        this.setData({
          autoplay: !this.data.autoplay
        })
      },
      intervalChange (e) {
        this.setData({
          interval: e.detail.value
        })
      },
      durationChange (e) {
        this.setData({
          duration: e.detail.value
        })
      }
    }

  }
</script>

<style scoped>


</style>

